<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="/js/axios.min.js"></script>
    <script>
        function checkUserName() {
            //向服务器发送ajax的get请求，第一个参数为url路径，第二个参数为请求数据
            axios.get("/user/checkName", {
                params: {
                    //请求参数
                    userName: $("name").value
                }
            }).then(resp => {
                // alert(resp);
                var str = resp.data;
                if (str == "OK") {
                    $("nameSpan").innerHTML = "该用户以存在";
                    $("nameSpan").style.color = "red";
                } else {
                    $("nameSpan").innerHTML = "可以使用";
                    $("nameSpan").style.color = "green";
                }
            })
        }

        function $(id) {
            return document.getElementById(id);
        }

        window.onload = function () {
            showData();
        }

        function showData() {
            axios.get("/user/getList").then(resp => {
                var info = resp.data;
                var str = "";
                info.forEach(n => {
                    str += `<tr><td>${n.id}</td><td>${n.name}</td><td>${n.birthday}</td></tr>`;
                })
                $("data").innerHTML = str;
            })
        }

        async function send() {
            var num = 0;
            await axios.get("getStr").then(resp => {
                num = resp.data;
            });
            alert("num" + num);
        }

    </script>
</head>
<body>
用户名：<input type="text" id="name" onblur="checkUserName()">
<span id="nameSpan"></span><br>
电话：<input type="text" id="phone"><br>

<table border="1" width="60%" cellspacing="0">
    <thead>
    <tr>
        <th>编号</th>
        <th>姓名</th>
        <th>生日</th>
    </tr>
    </thead>
    <tbody id="data"></tbody>
</table>

</body>
</html>